<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1, user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<title></title>
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link href="../css/style.css" rel="stylesheet" />
		<link href="../css/iconfont.css" rel="stylesheet" />
		<link href="../css/app.css" rel="stylesheet" />
		<style>
			body{background:#fff;}
			.mui-bar-nav{
				width:90%;
				margin: 0 auto;
				box-shadow:none;
				position: relative;
			}
			.mui-header{
				width:100%;
				height:180px;
				text-align: center;
				/*margin-top: 10px;*/
				
			}.mui-header img{
				margin:40px 0 0;
				max-height:100%;
			}
			.mui-input-row label{
				padding:11px 0;
				text-align: center;
				width:15%;
			}
			.mui-input-row{
				background:#d9dba4!important;
				margin-bottom:5px;
			}
			.mui-input-row input[placeholder]{
				color:#9fa41c;
			}
			::-webkit-input-placeholder { /* WebKit browsers */ 
			color: #9fa41c;
			} 
			:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ 
			color: #9fa41c; 
			} 
			::-moz-placeholder { /* Mozilla Firefox 19+ */ 
			color: #9fa41c; 
			} 
			:-ms-input-placeholder { /* Internet Explorer 10+ */ 
			color: #9fa41c; 
			}
			.mui-input-row i{
				color:#9fa41c;
				font-size: 20px;
			}
			.mui-btn-block{
				background: #9fa41c;
				border-color:#9fa41c;
				padding:5px;
				width: 100%;
				border-radius:0px;
			}
			.mui-content-padded{
				margin: 10px 0 0;
			}
			.mui-input-row input{
				width:85%!important;
				padding:15px 0px 6px 0;
				color:#000!important;
			}
			.mui-btn-primary:enabled:active{
				background: #d9dba4;
				border-color: #d9dba4;
			}
			.mui-content{
				background: #fff;
			}
			#reg{
				float: right;
			}
			#forgetPassword{
				float: left;
			}
			.link-area a{
				color:#9fa41c;
			}
			.mui-input-group .mui-input-row:after{
				content:none;
			}
			.mui-iconfont{
				font-size: 24px!important; 
			}
			.mui-content-auth{
				margin-top:120px;
				width:90%;
			}
			.mui-content-icon{
				display: table;
				width:100%;
				margin-top:10px;
			}
			.mui-content-icon span{
				display: table-cell;
				width:20%;
				text-align: center;
			}
			.mui-content-icon span img{
				width: 50%;
			}
			.mui-input-password~.mui-icon-eye.mui-active{
				color:#9fa41c!important;	
			}
		</style>

	</head>

	<body>
		<div class="mui-bar mui-bar-nav" style="width: 100%;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">登录</h1>
		</div>
		<div class="mui-bar-nav">
		    
			<div class="mui-header">
				<img src="../images/login.png" width="65%" />
			</div>
			<div class="mui-content">
				<form id='login-form' class="mui-input-group">
					<div class="mui-input-row">
						<label><i class="iconfont icon-shouji mui-iconfont"></i></label>
						<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入手机号">
					</div>
					<div class="mui-input-row mui-password">
						<label><i class="iconfont icon-unie614"></i></label>
						<input id='password' type="password" class="mui-input-password mui-input" placeholder="请输入密码">
					</div>
				</form>
				<div class="mui-content-padded">
					<button id='login' class="mui-btn mui-btn-block mui-btn-primary mui-submit">登录</button>
					<div class="link-area"><a id='reg'>新用户注册</a><a id='forgetPassword'>忘记密码</a></div>
				</div>
			</div>
			<div class="mui-content-auth">
				<div class="mui-content-title">
					<img src="../images/login_10.png" width="100%" />
				</div>
				<div class="mui-content-icon">
					<span><img src="../images/icon1.png" /></span>
					<span><img src="../images/icon2.png" /></span>
					<span><img src="../images/icon3.png" /></span>
					<span><img src="../images/icon4.png" /></span>
					<span><img src="../images/icon5.png" /></span>
				</div>
			</div>
		</div>
		<script src="../js/mui.min.js"></script>
		<script src="../js/castapp.js"></script>
		<script src="../js/myapp.js"></script>
	</body>
</html>
<script>
	
	var mui_submit = ca.className('mui-submit');
	//点击登录
	mui_submit[0].addEventListener('tap',function(){
		var access_token = localStorage.getItem('access_token');
		var mobile = ca.id('account').value;
		var password = ca.id('password').value;
		//手机正则
        var isMobile=/^(((13[0-9]{1})|(15[0-9]{1})|(17[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
        var pwd = /^[a-z0-9A-Z_]{6,16}$/;
        //请求接口 
		var url = request_url + '/api/user/user_oauth?access_token='+access_token;
		if(!isMobile.test(mobile)){
			ca.prompt('手机号格式不正确');return;
		}
		if(!pwd.test(password)){
			ca.prompt('密码格式不正确');return;
		}
		ca.post({
			url:url,
			data:{
				mobile:mobile,
				password:password
			},
			succFn:function(res){
				var json = JSON.parse(res);
				//console.log(res);
				//console.log(url);
				if(json.status == 1){
					console.log(json.info);
					//缓存用户授权token
					localStorage.setItem('user_access_token', json.user_access_token);
					//缓存手机
					localStorage.setItem('user_mobile', json.info.mobile);
					//缓存头像
					var avatar = json.info.avatar ? json.info.avatar : '../images/default.png';
					localStorage.setItem('user_avatar', avatar);
					//缓存昵称
					localStorage.setItem('user_nicename', json.info.user_nicename);
					//缓存性别
					localStorage.setItem('user_sex', json.info.sex);
					//缓存生日
					localStorage.setItem('user_birthday', json.info.birthday);
					//发送通知
					ca.sendNotice('pages/home.html','userInfo',json.info);
					//跳转到主界面
					//ca.getStartInterface(function(obj){obj.show();});
					ca.prompt(json.msg);
					setTimeout(function(){
						//关闭当前页
						ca.closeCurrentInterface();
					},1000);
				}
				else if(json.status == -1){
					ca.prompt('登录失败，请重新登录');
					localStorage.setItem('access_token', '');
					init_token();
				}
				else{
					ca.prompt(json.msg);
				}
				
			}
		});
	});
	ca.id('reg').addEventListener('tap',function(){
		ca.newInterface({url:'register.html',id:'register'});
	});
	ca.id('forgetPassword').addEventListener('tap',function(){
		ca.newInterface({url:'find_password.html',id:'find_password'});
	});
</script>